<template>
  <div class="box-count">
    <div class="box-item">
      <div style="font-size: 18px">累计预约用户数</div>
      <div style="font-size: 50px; margin-top: 10px">{{orderUserCount}}人</div>
    </div>
    <div class="box-item">
      <div style="font-size: 18px">累计预约下单量</div>
      <div style="font-size: 50px; margin-top: 10px">{{orderCount}}</div>
    </div>
    <div class="box-item" style="color: red;">
      <div style="font-size: 18px">待服务订单量</div>
      <div style="font-size: 50px; margin-top: 10px">{{waitOrderCount}}</div>
    </div>
    <div class="box-item">
      <div style="font-size: 18px">已服务订单量</div>
      <div style="font-size: 50px; margin-top: 10px">{{finishedOrderCount}}</div>
    </div>
  </div>
</template>

<script>
import {allStatistics} from '../../api/index'
export default {
  data() {
    return {
      orderUserCount: "",
      orderCount: "",
      waitOrderCount: "",
      finishedOrderCount: "",
    };
  },
  created() {
    this.id = atob(this.$route.query.id);
  },
  mounted() {
    let that = this;
    this.getData();
    setInterval(() => {
      that.getData();
    }, 10000);
  },
  methods: {
    getData() {
      allStatistics({id: this.id}).then((res)=>{
        let data = res.data.data;
        this.orderUserCount = data.orderUserCount;
        this.orderCount = data.orderCount;
        this.waitOrderCount = data.waitOrderCount;
        this.finishedOrderCount = data.finishedOrderCount;
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.box-count {
  width: 30%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .box-item {
    box-sizing: border-box;
    width: 45%;
    background-color: rgba(17, 59, 91, 1);
    color: #fff;
    border-radius: 5px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 25px;
  }
}
</style>